<template>
    <div class="multimatch">
        <div class="title" >最佳匹配</div>
        
        <div class="tags">
            <div class="tags_item" v-if="artist">
            <el-image  :src="artist.img1v1Url" alt="">
                <div slot="placeholder"><i class="el-icon-loading"></i></div>
            </el-image>
            <div class="title">歌手：{{artist.name}}</div>
            <div class="iconfont  iconarrow_right"></div>
            </div>
            <div class="tags_item" v-if="album" @click="goAlbum(album.id)">
                <el-image  :src="album.picUrl" alt="">
                    <div slot="placeholder"><i class="el-icon-loading"></i></div>
                </el-image>
                <div class="title">专辑：{{album.name}}</div>
                <div class="iconfont  iconarrow_right"></div>
            </div>
        </div>
    </div>
</template>

<script>
export default {
    name: 'tags',
    props: [
        'album',
        'artist',
    ],
    data() {
        return {

        };
    },
    computed: {

    },
    created() {

    },
    mounted() {

    },
    watch: {

    },
    methods: {
        goAlbum(id){
            this.$router.push({path:"/album",query:{id}})
        }
    },
    components: {

    },
};
</script>

<style scoped lang="less">
.position_flex(@jc:space-between,@ai:center){
  display: flex;
  align-items: @ai;
  justify-content: @jc;
}
.multimatch{
    border-bottom: 1px solid;
    padding: 20px 40px;
    color: #fff;
    .title{
        margin-bottom: 20px
    }
    .tags{
        .position_flex(flex-start);
        .tags_item{
            .position_flex(flex-start);
            position: relative;
            width: 250px;
            border: 1px solid;
            padding: 5px;
            margin-right: 80px;
            cursor: pointer;
            .el-image{
                width: 50px;
                height: 50px;
                margin-right: 10px;
                border: 1px solid #ccc;
                img{
                    width: 100%;
                    height: 100%;
                }
            }
            
            .title{
                width: 150px;
            }
            .iconfont{
                position: absolute;
                right: 20px;
                font-size: 25px;
                color: #ccc;
            }
        }
    }
    
}

</style>
